<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>收废品</el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :inline="true">
			<el-form-item label="驿站名称:">
				<el-input v-model="queryInfo.courierStationName"></el-input>
			</el-form-item>
			<el-form-item label="小区名称:">
				<el-input v-model="queryInfo.communityName"></el-input>
			</el-form-item>
			<el-form-item label="添加时间:">
				<el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="dataValue" type="daterange" align="right"
					unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
					:picker-options="pickerOptions">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button @click="getinfo" type="primary">搜索</el-button>
			</el-form-item><br />


			<el-form-item>
				<el-button :title="title" @click="add" type="primary"> 添加驿站</el-button>
				<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
					<el-form :model="courierStationData">
						<el-form-item label="驿站名字" label-width="80px" style="margin-top: 10px;">
							<el-input placeholder="请输入驿站名字" v-model="courierStationData.communityName"></el-input>
						</el-form-item>
						<el-form-item label="所属地区" label-width="80px" style="margin-top: 10px;">
							<el-cascader v-model="address" :options="citys" @change="handleChange"></el-cascader>
						</el-form-item>
						<el-form-item label-width="80px" style="margin-top: 10px;">
							<el-input placeholder="详细地址" v-model="courierStationData.courierStationAddress"></el-input>
						</el-form-item>

						<el-form-item label="所属小区" label-width="80px" style="margin-top: 10px;">
							<el-select v-model="courierStationData.courierStationCommunityId" clearable
								placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancel">取消</el-button>
						<el-button type="primary" @click="updateCommunity">确 定</el-button>
					</div>
				</el-dialog>
			</el-form-item>


		</el-form>
		<el-table :header-cell-style="{fontSize: '14px', backgroundColor: '#1890FF',color:'#ffffff'}" :data="tableData"
			border style="width: 100%">
			<el-table-column prop="courierStationId" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="courierStationName" label="驿站名字" width="180">
			</el-table-column>
			<el-table-column prop="courierStationImage" label="驿站照片" width="180">
			</el-table-column>
			<el-table-column prop="courierStationAddress" label="驿站地址" width="180">
			</el-table-column>
			<el-table-column prop="courierStationCommunityName" label="所在小区" width="180">
			</el-table-column>
			<el-table-column prop="courierStationOrderCount" label="订单总数" width="180">
			</el-table-column>
			<el-table-column prop="addTime" label="添加时间" width="180">
			</el-table-column>
			<el-table-column prop="courierStationStatus" label="状态">
			    <template slot-scope='scope'>
			        <span v-if="scope.row.courierStationStatus === 1">上架中</span>
			        <span v-else-if="scope.row.courierStationStatus === 0">已下架</span>
			    </template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="ed(scope.row)" type="text" size="small">编辑门店</el-button>
					<el-button @click="edStatus(scope.row)" type="text" size="small">修改状态</el-button>
					
					<!-- <el-button  @click="open">点击打开 Message Box</el-button> -->

					<!-- 	<el-button @click="del(scope.row.communityId)" type="text" size="small">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-row style="margin-top: 10px;">
			<div class="block">
				<el-pagination layout="prev, pager, next,jumper,total,sizes" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[1,5,10,20]"
					:page-size="queryInfo.pageSize" :total="total">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js';
	export default {
		data() {
			return {
				options: [],
				courierStationData: {
					courierStationCommunityId: 0,
					courierStationCommunityName: ''
				},
				show: false,
				title: '新增门店',
				address: [],
				courierStationData: {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: 0,
					courierStationCommunityName: null,
					courierStationDistrict: "",
					courierStationId: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationOrderCount: 0,
					courierStationProvince: "",
					courierStationSort: 1,
					courierStationStatus: 1
				},
				citys: citys,
				dialogFormVisible: false,

				total: 0,
				tableData: [],
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					courierStationName: '',
					communityName: '',
					courierStationStatus: '',
					keyword: '',
					startTime: '',
					endTime: '',

				},
				dataValue: [],
				input: '',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value1: '',
				value2: '',
				community:[]
			}
		},
		methods: {
			edStatus(row) {
				this.community=row;
				if(this.community.courierStationStatus==1){
					this.community.courierStationStatus=0
				}else if(this.community.courierStationStatus==0){
					this.community.courierStationStatus=1
				}
			    this.$http.post('courierstation/modifycourierStation', this.community)
			    .then(res => {
			        if (res.data.status === 200) {
			            this.$message.success('修改成功');
			            this.getinfo();
			        } else {
			            this.$message.error('修改失败');
			        }
			    })
			    .catch(error => {
			        console.error(error);
			        this.$message.error('请稍后重试');
			    });
			},
			fetchCommunities() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: {
							communityName: this.queryInfo.communityName,
							communityId: this.queryInfo.communityId
						}
					})
					.then((res) => {
						if (res.data.status === 200) {
							this.options = res.data.data.list.map(community => ({
								value: community.courierStationCommunityId,
								label: community.courierStationCommunityName
							}));
						} else {
							this.$message.error('无法获取小区列表');
						}
					})
					// .catch(error => {
					// 	console.error(error);
					// 	this.$message.error('请求失败，请稍后重试');
					// });
			},
			open() {

			},
			cancel() {
				this.dialogFormVisible = false;
				this.address = [];
				this.courierStationData = {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: 0,
					courierStationCommunityName: null,
					courierStationDistrict: "",
					courierStationId: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationOrderCount: 0,
					courierStationProvince: "",
					courierStationSort: 1,
					courierStationStatus: 1
				};


			},
			updateCommunity() {
				if (this.title == "新增门店") {
					this.$http.post('courierStation/addCourierStation', this.courierStationData)
						.then((res) => {
							if (res.data.status == 200) {
								this.$message.success('添加成功');
								this.dialogFormVisible = false;
								this.getinfo();
							} else {
								this.$message.error('操作失败');
							}
						})
						.catch(error => {
							console.error(error);
							this.$message.error('请求失败，请检查输入信息');
						});
				} else if (this.title == "编辑门店") {
					this.$http.post('courierStation/modifyCourierStation', this.courierStationData)
						.then((res) => {
							if (res.data.status == 200) {
								this.$message.success('编辑成功');
								this.dialogFormVisible = false;
								this.getinfo();
							} else {
								this.$message.error('操作失败');
							}
						})
						.catch(error => {
							console.error(error);
							this.$message.error('请求失败，请检查输入信息');
						});
				}

			},
			handleChange() {
				console.log('');
			},

			add() {
				this.title="新增门店";
				this.dialogFormVisible = true;
			},
			handleClick() {
				console.log('查看关联门店');
			},
			ed(row) {
				this.title = "编辑门店";
				this.dialogFormVisible = true;
				this.courierStationData = row;
				this.address = [
					this.courierStationData.courierStationProvince,
					this.courierStationData.courierStationCity,
					this.courierStationData.courierStationDistrict,
					this.courierStationData.courierStationAddress
				]
			},
			// 	del(shopId) {
			// 		this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			// 		  confirmButtonText: '确定',
			// 		  cancelButtonText: '取消',
			// 		  type: 'warning'
			// 		}).then(() => {
			// 		  this.$message({
			// 		    type: 'success',
			// 		    message: '删除成功!'
			// 		  });
			// 		}).catch(() => {
			// 		  this.$message({
			// 		    type: 'info',
			// 		    message: '已取消删除'
			// 		  });          
			// 		}).then(
			// 		this.$http.post('community/communityRemove',{'communityId':communityId
			// })
			// 		.then((res)=>{
			// 			if(res.data.status==200){
			// 				this.getinfo();
			// 			}
			// 		}))
			// 	},
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.getinfo();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.getinfo();
			},
			getinfo() {
				this.queryInfo.keyword = this.queryInfo.shopName;
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.queryInfo
					})
					.then((res) => {
						this.tableData = res.data.data.list;
						this.total = res.data.data.total;
						if (res.data.status == 200) {
							console.log(res.data.data.list)
						} else {
							this.$message.error('服务器接口异常')
						}
					})
			}
		},
		mounted() {
			this.fetchCommunities();
			this.getinfo();
		},
		watch: {
			address() {
				this.courierStationData.courierStationProvince = this.address[0];
				this.courierStationData.courierStationCity = this.address[1];
				this.courierStationData.courierStationDistrict = this.address[2];
			},
			dataValue() {
				if (this.dataValue) {
					this.queryInfo.startTime = this.dataValue[0];
					this.queryInfo.endTime = this.dataValue[1]
				} else {
					this.queryInfo.startTime = '',
						this.queryInfo.endTime = ''
				}
			}
		}
	}
</script>

<style>
</style>